
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js 事件</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
  </head>
  <body>
      <nav id="nav1">
          <div id="box1">
                    
                绑定事件的几种方式

                行内绑定
                函数赋值绑定
                发布订阅模式, 绑定

          </div>
      </nav>


      <ul id="ul1">
          
      </ul>
  </body>

  <script>
      /*
        绑定事件的几种方式

        行内绑定
        函数赋值绑定
        发布订阅模式, 绑定

        事件冒泡
            
            body
                nav 
                    div onclick

            阻止事件冒泡: stopPropagation
            IE e.cancelBubble = false

        事件默认行为
            e.preventDefault()

            IE e.returnValue = false
            return false

        事件委托

            给父级加事件, 通过 event.target 可以指向触发事件的 dom 节点

            body
                nav onclick e.target
                    div 

      */

        var ul1 = document.querySelector('#ul1');


        for (let i = 0; i < 100; i++) {
            ul1.innerHTML += '<li>--'+ i +'--</li>'
        }
        
        ul1.addEventListener('click', function(e) {
            console.log(
                e.target
            )
        })

        var box1 = document.getElementById('box1');
        var nav1 = document.getElementById('nav1');

        function bindEvent (eml, action, fn) {
            if (eml.attachEvent) {
                eml.attachEvent('on'+action, fn)
            } else if (eml.addEventListener) {
                eml.addEventListener(action, fn)
            }
        }
        bindEvent(box1, 'mousemove', function(e) {
            // alert('222')
            console.log(
                'box'
            )
            // code ...

            // e.stopPropagation();
            // e.preventDefault()
            e.returlValue = false
            return false
        })

        // bindEvent(nav1, 'click', function(e) {
        //     console.log('nav ')
        // })

        // bindEvent(document.body, 'click', function() {
        //     console.log('body ')
        // })


  </script>

</html>
